<template>
  <div class="recommend-list">
    <div class="recommend-item" v-for="item of recommends" :key="item.image">
      <a :href="item.link" class="recommend-link">
        <img :src="item.image" alt="" class="recommend-image">
        <span class="recommend-title">
          {{item.title}}
        </span>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RecommendList",
    props: {
      recommends: {
        type: Array,
        default() {
          return []
        }
      }
    },
  }
</script>

<style scoped lang="less">
  .recommend-list{

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    // 背景颜色条：通过border来模拟
    border-bottom: 10px solid rgba(204, 204, 204, 0.74);

    .recommend-item{
      width: 25%;
      a.recommend-link{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .recommend-image{
          width: 80%;
        }
        .recommend-title{
          font-size: 14px;
          margin-top: 6px;
        }
      }
    }
  }

</style>
